<template>
  <div class="hotNews">
      <h3>热门资讯</h3>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <a v-for="item in hotNewsList" :key="item" :href="item.url">{{ item.text }}</a>
      </van-list>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    props:[ "hotNewsList" ],
    mounted(){
    },
    methods: {
        onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.hotNewsList.push(this.hotNewsList.length + 1);
      //   }
        // 加载状态结束
        this.loading = false;
      //   // 数据全部加载完成
      //   if (this.hotNewsList.length >= 40) {
          this.finished = true;
      //   }
      // }, 1000);
    },
    }
}
</script>

<style lang="less" scoped>
.hotNews {
  text-align: left;
  margin-left: 5%;
  padding-bottom: 50px;
  a {
      display: block;
      margin-bottom: 5%;
      color: black;
  }
}
</style>